<template>
    <div class="goodlist">
        <ul class="header__tab">
            <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all0'}" @click="setSearchType('all0')">全部</li>
            <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all1'}" @click="setSearchType('all1')">售卖中</li>
            <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all2'}" @click="setSearchType('all2')">售完下架</li>
            <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all3'}" @click="setSearchType('all3')">我下架的</li>
            <li class="header__tab__item" :class="{'header__tab__item__active': search.type == 'all4'}" @click="setSearchType('all4')">未上架的</li>
        </ul>
        <div class="goods-search">
            <el-form :inline="true" :model="goodsDta" class="demo-form-inline">
                <el-form-item label="商品名称" prop="name" :rules="[{required:true,message:'请输入商品名称'}]">
                    <el-input v-model="goodsDta.name" placeholder="输入商品名称"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="low_price" :rules="[{ required: true, message: '请输入最低价格'}]" >
                    <el-col :span="10">
                    <el-input v-model="goodsDta.low_price"  placeholder="单行输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-col class="line" :span="1">至</el-col>
                </el-form-item>
                <el-form-item label=""  prop="high_price" :rules="[{ required: true, message: '请输入最高价格'}]" >
                    <el-col :span="10">
                    <el-input v-model="goodsDta.high_price"  placeholder="单行输入"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="店铺分类"  prop="region" :rules="[{required:true,message:'请选择店铺'}]">
                    <el-select v-model="goodsDta.region" placeholder="请选择">
                    <el-option label="分类一" value="shanghai"></el-option>
                    <el-option label="分类二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">搜索</el-button>
                </el-form-item>
            </el-form>
            <div class="butto-row">
                <el-row>
                    <el-button size="small">删除</el-button>
                    <el-button size="small">上架</el-button>
                    <el-button size="small">下架</el-button>
                </el-row>
            </div>
            <div class="goods-body">
                 <el-table :data="tableData"  style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}">
                    <el-table-column type="selection" width="35"></el-table-column>
                    <el-table-column prop="imgUrl" label="商品图片" sortable width="160">
                        <template slot-scope="scope">
                            <img :src="scope.row.imgUrl" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="商品名称" sortable width="100"></el-table-column>
                    <el-table-column prop="id" label="商品ID"  sortable width="120"></el-table-column>
                    <el-table-column prop="status" label="审核状态" sortable width="120">
                        <template slot-scope="scope">
                            <span>{{scope.row.status==0?'已审核':'未审核'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="价格"  sortable width="80"></el-table-column>
                    <el-table-column prop="kucun" label="库存"  sortable width="80"></el-table-column>
                    <el-table-column prop="sale_num" label="销量"  sortable width="80"></el-table-column>
                    <el-table-column prop="sale_time" label="上架时间" sortable width="120"></el-table-column>
                    <el-table-column prop="operation" label="操作"  sortable width="80"></el-table-column>
                </el-table>
                <div class="block" style="margin-top:15px;text-align: center;">
                   <el-pagination layout="prev, pager, next" :total="50"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import testImg from '~/static/images/de.png'
import {findGoodsList} from '~/api/apiv1.js'
export default {
    data(){
        return{
            search: {type: 'all0'},
            goodsDta:{
                name:'',
                low_price:'',
                high_price:'',
                region:'',
                isOnSale:'',
                isReal:'',
                shopId:'',
                catId:''

            },
             tableData: [{
                imgUrl: testImg,
                name: '商品1',
                id:'1234',
                status:'0',
                price:'321',
                kucun:'4432',
                sale_num:'345',
                sale_time:'2016-12-02',
                operation:'编辑'
                },
                {imgUrl: testImg,
                name: '商品2',
                id:'1234',
                status:'1',
                price:'321',
                kucun:'4332',
                sale_num:'345',
                sale_time:'2016-05-02',
                operation:'编辑'
                },
                 {imgUrl: testImg,
                name: '商品3',
                id:'1254',
                status:'0',
                price:'361',
                kucun:'4302',
                sale_num:'345',
                sale_time:'2016-04-02',
                operation:'编辑'
                }]
        }
    },
    beforemounted(){
        this.goodlist()
    },

    methods:{
        setSearchType (type) {
          this.search.type = type
        },
        formatter(row, column) {
        return row.address;
      },
      async  goodlist(){
         const  res = await findGoodsList (this,this.goodsData.name,this.goodsData.high_price,this.goodsData.low_price,
         this.goodsData.isOnSale,this.goodsData.isReal,this.goodsData.shopId,this.goodsData.catId)
      }
    }
}
</script>
<style lang="scss" scoped>
  .goodlist{
    .goods-search{
        width:95%;
        margin:0  auto;
        margin-top: 20px;
        padding:10px 20px;
        background-color:#fff;
      & /deep/ {
      .el-input__inner{
            height: 30px;
            line-height: 30px;
            border-radius: 9px;
            text-align: center;
            width: 120px; 
      }
      .el-form-item__label{
          margin-left:10px;
      }
    }
    .butto-row{
        & /deep/{
        .el-button--small{
            background-color: gainsboro;
          }
    }
    }
 }
 .goods-body{
     margin-top: 20px;
 }
}
</style>
